<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>搜索页面</title>
    <link rel="shortcut icon" href="img/xiaoe.ico"/>
    <link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="css/seastyle.css" rel="stylesheet" type="text/css"/>
    <link href="css/lee.css" rel="stylesheet" type="text/css"/>
    <!-- 分页css -->
    <link href="components/VuePaging/zpageNav.css" rel="stylesheet"/>
    <script type="text/javascript" src="basic/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>-->
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/axios.min.js" type="text/javascript"></script>
</head>

<body>
<div class="attention">本电商购物平台为演示网站，仅供学习和交流。所有交易金额均为0.01元，并且不会真实发货！！</div>
<div id="search">
    <!--顶部导航条 -->
    <div class="am-container header">
        <ul class="message-l">
            <div class="topMessage">
                <div class="menu-hd" v-show="!userIsLogin">
                    <a href="login.html" target="_top" class="h">亲，请登录</a>
                    <a href="register.html" target="_top">免费注册</a>
                </div>
                <div class="menu-hd" v-show="userIsLogin">
                    <span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
                    <a href="javascript:void(0);" style="color: #d2364c" @click="logout">退出</a>
                </div>
            </div>
        </ul>
        <ul class="message-r">
            <div class="topMessage home">
                <div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
            </div>
            <div class="topMessage my-shangcheng">
                <div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
                    <i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
            </div>
        </ul>
    </div>

    <!--悬浮搜索框-->
    <div class="nav white">
        <!-- <div class="logo"><img src="images/logo.png" /></div> -->
        <div class="logoBig">
            <li><a href="index.html"><img src="images/logobig.png" alt="大图标"/></a></li>
        </div>

        <div class="search-bar pr">
            <a name="index_none_header_sysc" href="#"></a>
            <form action="">
                <input id="searchInput" v-model="keywords" name="index_none_header_sysc" type="text"
                       placeholder="搜索" autocomplete="off">
                <input id="ai-topsearch" @click="doSearch" class="submit am-btn" value="搜索" index="1">
            </form>
        </div>
    </div>

    <div class="clear"></div>
    <b class="line"></b>
    <div class="search">
        <div class="search-list">
            <div class="nav-table">
                <div class="long-title"><span class="all-goods">搜索页面</span></div>
            </div>


            <div class="am-g am-g-fixed">
                <div class="am-u-sm-12 am-u-md-12">
                    <div class="search-content" style="width: 100%;">
                        <div class="sort">
                            <li :class="[{'first' : sort === 'k'}]" @click="chooseSort('k')"><a title="默认"
                                                                                                href="javascript:void(0);">默认排序</a>
                            </li>
                            <li :class="[{'first' : sort === 'c'}]" @click="chooseSort('c')"><a title="销量"
                                                                                                href="javascript:void(0);">销量排序</a>
                            </li>
                            <li :class="[{'first' : sort === 'p'}]" @click="chooseSort('p')"><a title="价格"
                                                                                                href="javascript:void(0);">价格优先</a>
                            </li>
                        </div>
                        <div class="clear"></div>

                        <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 boxes">

                            <li v-for="(item, index) in itemsList" :key="index" @click="showItemDetail(item.itemId)">
                                <div class="i-pic limit">
                                    <img :src="item.imgUrl" alt="图片"/>
                                    <p class="title fl" v-html="item.itemName"></p>
                                    <p class="price fl">
                                        <b>¥</b>
                                        <strong>{{item.price / 100}}</strong>
                                    </p>
                                    <p class="number fl">
                                        销量<span>{{item.sellCounts}}</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                    <!--分页 -->
                    <!-- <ul class="am-pagination am-pagination-right">
                        <li class="am-disabled"><a href="#">&laquo;</a></li>
                        <li class="am-active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul> -->
                    <!-- 分页 start-->
                    <div class="wrap" id="wrap2">
                        <zpagenav v-bind:page="page" v-bind:page-size="pageSize" v-bind:total="total"
                                  v-bind:max-page="maxPage" v-on:pagehandler="doPaging">
                        </zpagenav>
                    </div>
                    <!-- 分页 end-->

                </div>
            </div>
            <div class="footer">
                <div class="footer-bd ">
                    <p><em>© 2021 pinpin.com 粤ICP备13009803号-11 深圳小鹅文化传媒有限公司 版权所有</em></p>
                </div>
            </div>
        </div>

    </div>

    <!--引导 -->
    <div class="navCir">
        <li><a href="index.html"><i class="am-icon-home "></i>首页</a></li>
        <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
        <li><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
        <li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
    </div>

    <!--菜单 -->
    <div class="tip">
        <div id="sidebar">
            <div id="wrap">
                <div id="prof" class="item ">
                    <a href="# ">
                        <span class="setting "></span>
                    </a>
                    <div class="ibar_login_box status_login " style="height: 150px">
                        <div class="avatar_box ">
                            <p class="avatar_imgbox ">
                                <img v-show="userIsLogin" :src="userInfo.face" alt=""/>
                                <img v-show="!userIsLogin" src="img/default-face.png" alt=""/>
                            </p>
                            <ul class="user_info">
                                <li v-show="!userIsLogin">用户未登录</li>
                                <li v-show="userIsLogin">用户昵称：{{userInfo.nickname}}</li>
                                <li v-show="userIsLogin" @click="logout">退出登录</li>
                            </ul>
                        </div>
                        <i class="icon_arrow_white "></i>
                    </div>

                </div>
                <div id="shopCart " class="item " @click="goToShopcart">
                    <a href="# ">
                        <span class="message "></span>
                    </a>
                    <p>购物车</p>
                    <p class="cart_num ">{{shopcartItemCounts}}</p>
                </div>

                <div class="quick_toggle ">
                    <li class="qtitem ">
                        <a href="#top " class="return_top "><span class="top "></span></a>
                    </li>
                </div>

                <!--回到顶部 -->
                <div id="quick_links_pop " class="quick_links_pop hide "></div>

            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    window.jQuery || document.write('<script src="basic/js/jquery-1.9.min.js"><\/script>');
</script>
<script type="text/javascript" src="basic/js/quick_links.js"></script>

<div class="theme-popover-mask"></div>
<script src="components/VuePaging/zpageNav.js" type="text/javascript"></script>
<script type="text/javascript " src="js/app.js"></script>
<script type="text/javascript">
    let index = new Vue({
        el: "#search",
        data: {
            keywords: null,
            sort: "k",
            page: 1,			// 分页页数
            pageSize: 20,		// 分页每页显示数量
            maxPage: 1,			// 总页数
            total: 1,			// 总记录数
            itemsList: [],
            searchType: null,	// 搜索类型，catItems：根据分类id搜索；searchItems：根据关键字搜索
            catId: 0,			// 分类id
            shopcartItemCounts: 0,	// 购物车中商品的数量
        },
        created() {
            // let   me = this;
            // 通过cookie判断用户是否登录
            this.judgeUserLoginStatus();

            let page = app.getUrlParam("page");
            if (page === null || page === undefined || page === '') {
                page = 1;
            }
            this.page = page;

            let pageSize = app.getUrlParam("pageSize");
            if (pageSize === null || pageSize === undefined || pageSize === '') {
                pageSize = 20;
            }
            this.pageSize = pageSize;

            let searchType = app.getUrlParam("searchType");
            if (searchType === null || searchType === undefined || searchType === '') {
                return false;
            } else if (searchType === "searchItems") {
                this.searchType = searchType;

                let keywords = app.getUrlParam("keywords");
                if (keywords === null || keywords === undefined || keywords === '') {
                    return;
                }
                this.keywords = keywords;

                this.searchInBackend(keywords, "k", 1, 20);
            } else if (searchType === "catItems") {
                this.searchType = searchType;
                // 从别的页面来的搜索
                let catId = app.getUrlParam("catId");
                if (catId === null || catId === undefined || catId === '') {
                    return;
                }
                this.catId = catId;

                this.searchCatItemsInBackend(catId, "k", page, pageSize);
            }

            // 从购物车中拿到商品的数量
            this.shopcartItemCounts = app.getShopcartItemCounts();
        },
        methods: {
            goUserCenter() {
                // 判断用户是否登录
                let userIsLogin = this.userIsLogin;
                if (!userIsLogin) {
                    // 用户未登录，则跳转
                    window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
                } else {
                    window.location.href = app.centerServerUrl;
                }
            },
            goToShopcart() {
                window.location.href = "shopcart.html";
            },
            // 分页实现方法 跳转到page页
            doPaging: function (page) {
                this.page = page;

                let searchType = this.searchType;
                if (searchType === "searchItems") {
                    this.searchInBackend(this.keywords, this.sort, page, this.pageSize);
                } else if (searchType === "catItems") {
                    this.searchCatItemsInBackend(this.catId, this.sort, page, this.pageSize);
                }


            },
            showItemDetail(itemId) {
                window.open("item.html?itemId=" + itemId);
            },
            chooseSort(sort) {
                // console.log(sort);
                this.sort = sort;

                let searchType = this.searchType;
                if (searchType === "searchItems") {
                    let keywords = this.keywords;
                    // console.log(keywords);
                    if (keywords === null || keywords === undefined || keywords === '') {
                        alert("搜索内容不能为空");
                        return;
                    }
                    this.searchInBackend(keywords, sort, 1, 20);
                } else if (searchType === "catItems") {
                    let catId = this.catId;
                    // console.log(keywords);
                    if (catId === null || catId === undefined || catId === '') {
                        alert("分类不能为空");
                        return;
                    }
                    this.searchCatItemsInBackend(catId, sort, 1, 20);
                }
            },
            doSearch() {
                this.searchType = "searchItems"
                let keywords = this.keywords;
                // console.log(keywords);
                if (keywords === null || keywords === undefined || keywords === '') {
                    alert("搜索内容不能为空");
                    return;
                }
                this.searchInBackend(keywords, "k", 1, 20);
            },
            searchCatItemsInBackend(catId, sort, page, pageSize) {
                // debugger;
                let serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;
                axios.get(serverUrl + '/items/catItems?catId=' + catId + "&sort=" + sort + "&page=" + page + "&pageSize=" + pageSize, {})
                    .then(res => {
                        if (res.data.status === 200) {
                            let grid = res.data.data;
                            this.itemsList = grid.rows;

                            let maxPage = grid.total;		// 获得总页数
                            let total = grid.records;		// 获得总记录数

                            this.maxPage = maxPage;
                            this.total = total;

                            // console.log(itemsList);
                        } else if (res.data.status === 500) {
                            alert(res.data.msg);
                            return;
                        }
                    });
            },
            searchInBackend(keywords, sort, page, pageSize) {
                // debugger;
                let serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;
                axios.get(serverUrl + '/items/search?keywords=' + keywords + "&sort=" + sort + "&page=" + page + "&pageSize=" + pageSize, {})
                    .then(res => {
                        if (res.data.status === 200) {
                            let grid = res.data.data;
                            this.itemsList = grid.rows;

                            let maxPage = grid.total;		// 获得总页数
                            let total = grid.records;		// 获得总记录数

                            this.maxPage = maxPage;
                            this.total = total;

                            // console.log(itemsList);
                        } else if (res.data.status === 500) {
                            alert(res.data.msg);
                            return;
                        }
                    });
            },
            getRequest() {
            },
            postRequest() {
            },
            // 通过cookie判断用户是否登录
            judgeUserLoginStatus() {
                let userCookie = app.getCookie("user");
                if (userCookie !== null && userCookie !== undefined && userCookie !== '') {
                    let userInfoStr = decodeURIComponent(userCookie);
                    // console.log(userInfo);
                    if (userInfoStr !== null && userInfoStr !== undefined && userInfoStr !== '') {
                        let userInfo = JSON.parse(userInfoStr);
                        // 判断是否是一个对象
                        if (typeof (userInfo) == "object") {
                            this.userIsLogin = true;
                            // console.log(userInfo);
                            this.userInfo = userInfo;
                        } else {
                            this.userIsLogin = false;
                            this.userInfo = {};
                        }
                    }
                } else {
                    this.userIsLogin = false;
                    this.userInfo = {};
                }
            },
            logout() {
                let userInfo = this.userInfo;
                let userId = this.userInfo.id;
                let serverUrl = app.serverUrl;

                axios.defaults.withCredentials = true;
                axios.post(serverUrl + '/passport/logout?userId=' + userId, {},
                    {
                        headers: {
                            'headerUserId': userInfo.id,
                            'headerUserToken': userInfo.userUniqueToken,
                            'headerUserRefreshToken': userInfo.userRefreshToken
                        }
                    })
                    .then(res => {
                        if (res.data.status === 200) {
                            window.location.href = "index.html";
                        } else if (res.data.status === 500) {
                            alert(res.data.msg);
                            return;
                        }
                    });
            }
        }
    });
</script>
</body>

</html>
